<template>
    <div class="cpe_list">
        <div v-show="frameCPE">
            <el-row :gutter="50">
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-select v-model="ft_cpe.eqpt_type" placeholder="请选择设备类型" @change="skip($event)" disabled style="width:100%;">
                            <el-option v-for="list in eqpt_typeList" :key="list.orderNum" :label="list.dictValue" :value="list.orderNum"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-select v-model="ft_cpe.eqptSpec" placeholder="请选择设备状态"  style="width:100%;">
                            <el-option v-for="list in eqptSpecList" :key="list.dictKey" :label="list.dictDescribe" :value="list.dictKey"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple" style="height:20px;"></div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-button @click="selectCPE()">筛选结果</el-button>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="50">
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-input v-model="ft_cpe.snNum" placeholder="请输入设备SN编号"  style="width:100%;"></el-input>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-button type="primary" icon="search" @click="filterCPE()">搜索</el-button>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple" style="height:20px;"></div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-button class="filter-item" type="primary" @click="derive()">导出</el-button>
                        <el-button class="filter-item" type="primary" @click="importTolead=true">导入</el-button>
                        <el-button class="el-dropdown-link" type="primary" @click="createBrand('5')">新建设备</el-button>
                        <!-- <el-dropdown @command="createBrand">
                                <el-button class="el-dropdown-link" type="primary">新建设备</el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="1" style="font-size:14px;">服务器</el-dropdown-item>
                                    <el-dropdown-item command="2" style="font-size:14px;">交换机</el-dropdown-item>
                                    <el-dropdown-item command="4" style="font-size:14px;">防火墙</el-dropdown-item>
                                    <el-dropdown-item command="5" style="font-size:14px;">CPE</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown> -->

                    </div>

                </el-col>
            </el-row>

            <!-- 设备信息表 -->
            <el-table :data="infocpe.pageData" border style="width: 100%;margin:20px 0">
                <el-table-column label="序号" min-width="80px">
                    <template scope="scope">
                        <span>{{scope.$index+1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="使用人" min-width="100px">
                    <template scope="scope">
                        <span>{{scope.row.useName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="联系方式" min-width="140px">
                    <template scope="scope">
                        <span>{{scope.row.contactPhone}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="出库日期" min-width="190px">
                    <template scope="scope">
                        <span>{{scope.row.outDate}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="入库日期" min-width="190px">
                    <template scope="scope">
                        <span>{{scope.row.putDate}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="SN编号" min-width="130px">
                    <template scope="scope">
                        <span>{{ scope.row.sn_num }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="类型" min-width="100px">
                    <template scope="scope">
                        <span>{{ scope.row.eqptTypeName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="客户信息" min-width="100px">
                    <template scope="scope">
                        <span>{{ scope.row.custName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" min-width="100px">
                    <template scope="scope">
                        <span>{{ scope.row.eqptStateName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="200px">
                    <template scope="scope">
                        <el-button size="small" @click="editCPE(scope.row)">编辑</el-button>
                        <el-button size="small" @click="detInfoCEP(scope.row)">详情</el-button>
                        <el-button size="small" type="danger" @click="deleteCPE(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页条 -->
            <div class="block">
                <el-pagination style="padding:0;" @current-change="handleCurrentChange" :current-page.sync="pageConfig.curPage" :page-size=pageConfig.size layout="prev, pager, next, jumper" :total="pageConfig.total">
                </el-pagination>
            </div>

        </div>

        <div v-show="detailsCPE">
            <el-button type="primary" @click="returnCPE">返回</el-button>
            <div class="demo-color-box-group" style="border: 1px solid rgb(224, 230, 237); border-radius: 4px; margin-top:10px;">
                <h4 style="padding-left:20px;">cpe详情信息</h4>
                <div :data="detailsData" class="detailCPE">
                    <el-row>
                        <el-col :span="4">
                            <div class="grid-content">
                                <span>领用人：</span>
                                <span>{{detailsData.device_cpe.custName}}</span>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content">
                                <span>联系电话：</span>
                                <span>{{detailsData.device_cpe.contactPhone}}</span>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content">
                                <span>客服信息：</span>
                                <span>{{detailsData.device_cpe.useName}}</span>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content">
                                <span>出库日期：</span>
                                <span>{{detailsData.device_cpe.outDate}}</span>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content">
                                <span>入库日期：</span>
                                <span>{{detailsData.device_cpe.putDate}}</span>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content">
                                <el-button type="primary" @click="editCPE(transfer.single)">修改配置</el-button>
                                <el-button type="primary" @click="repair(transfer.single)">报修记录</el-button>
                            </div>
                        </el-col>
                    </el-row>
                    <div class="detailCPE" style="border:1px solid #ccc; overflow:hidden;">
                        <el-row>
                            <el-col :span="4">
                                <div class="grid-content">
                                    <span>SN：</span>
                                    <span>{{detailsData.device_base.snNum}}</span>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="grid-content">
                                    <span>设备类型：</span>
                                    <span>CPE</span>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="grid-content">
                                    <span>品牌：</span>
                                    <span>{{detailsData.device_base.brandName}}</span>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="grid-content">
                                    <span>型号：</span>
                                    <span>{{detailsData.device_base.modelName}}</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="16">
                                <div class="grid-content">
                                    <span>CPU型号：</span>
                                    <span style="padding-right:15px;">{{detailsData.device_cpe.cpuModel}}</span>
                                    <span>CPU核数：</span>
                                    <span>{{detailsData.device_cpe.cpuNum}}</span>
                                </div>
                            </el-col>
                            <el-col :span="16">
                                <div class="grid-content">
                                    <span>内存型号：</span>
                                    <span style="padding-right:15px;">{{detailsData.device_cpe.memoryModel}}</span>
                                    <span>总容量：</span>
                                    <span>{{detailsData.device_cpe.memoryCapacity}}</span>
                                </div>
                            </el-col>
                            <el-col :span="16">
                                <div class="grid-content">
                                    <span>硬盘型号：</span>
                                    <span style="padding-right:15px;">{{detailsData.device_cpe.diskModel}}</span>
                                    <span>硬盘容量：</span>
                                    <span>{{detailsData.device_cpe.diskCapacity}}</span>
                                </div>
                            </el-col>
                            <el-col :span="16">
                                <div class="grid-content">
                                    <span>网口数量：</span>
                                    <span>{{detailsData.device_cpe.subNum}}</span>
                                </div>
                            </el-col>

                        </el-row>
                    </div>
                </div>
            </div>
        </div>

        <!--编辑CPE设备-->
        <el-dialog title="CPE信息" :visible.sync="addManage5" class="addCPE">
            <el-form :model="addInfos5" :rules="rules1" ref="addInfos5" v-if="addManage5">
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="领用人" :label-width="formLabelWidth" prop="useName">
                                <el-input v-model="addInfos5.useName" auto-complete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-form-item label="联系方式" :label-width="formLabelWidth" prop="contactPhone">
                                <el-input v-model="addInfos5.contactPhone" auto-complete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="客户信息" :label-width="formLabelWidth" prop="custName">
                                <el-input v-model="addInfos5.custName" auto-complete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="SN编号" :label-width="formLabelWidth" prop="snNum">
                                <el-input v-model="addInfos5.snNum" auto-complete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="出库日期" :label-width="formLabelWidth" prop="outDate">
                                <el-date-picker v-model="addInfos5.outDate" type="date" placeholder="选择日期" @change="changDate1($event)"></el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-form-item label="入库日期" :label-width="formLabelWidth" prop="putDate">
                                <el-date-picker v-model="addInfos5.putDate" type="date" placeholder="选择日期" @change="changDate2($event)"></el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="设备类型" :label-width="formLabelWidth">
                                <!-- <el-select v-model="addInfos5.eqpt_type" placeholder="请选择设备类型" style="width:100%" @change="typeBrand($event)">
                                            <el-option v-for="list in eqpt_typeList" :key="list.orderNum" :label="list.dictValue" :value="list.orderNum"></el-option>
                                        </el-select>  -->
                                <span class="cpe_fram">cpe</span>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="品牌名称" :label-width="formLabelWidth" prop="brandName">
                                <el-select v-model="addInfos5.brandName" placeholder="请选择品牌名称" style="width:100%" @change="brandType($event)">
                                    <el-option v-for="list in brandNameList" :key="list.brandId" :label="list.brandName" :value="list.brandId"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="设备型号" :label-width="formLabelWidth" prop="modelName">
                                <el-select v-model="addInfos5.modelName" placeholder="请选择设备型号" style="width:100%" @change="modelNum($event)">
                                    <el-option v-for="list in modelList" :key="list.modelId" :label="list.modelName" :value="list.modelId"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="设备规格" :label-width="formLabelWidth" prop="specName">
                                <el-select v-model="addInfos5.specName" placeholder="请选择设备规格" style="width:100%">
                                    <el-option v-for="list in specNameList" :key="list.dictKey" :label="list.dictValue" :value="list.dictKey"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="CPU型号" :label-width="formLabelWidth" prop="cpuModel">
                                <el-input v-model="addInfos5.cpuModel" auto-complete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-form-item label="CPU核数" :label-width="formLabelWidth" prop="cpuNum">
                                <el-input v-model="addInfos5.cpuNum" auto-complete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="内存型号" :label-width="formLabelWidth" prop="memoryModel">
                                <el-input v-model="addInfos5.memoryModel" auto-complete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-form-item label="内存总容量" :label-width="formLabelWidth" prop="memoryCapacity">
                                <el-input v-model="addInfos5.memoryCapacity" auto-complete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="硬盘型号" :label-width="formLabelWidth" prop="diskModel">
                                <el-input v-model="addInfos5.diskModel" auto-complete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-form-item label="硬盘大小" :label-width="formLabelWidth" prop="diskCapacity">
                                <el-input v-model="addInfos5.diskCapacity" auto-complete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="网口数量" :label-width="formLabelWidth" prop="subNum">
                                <el-input v-model="addInfos5.subNum" auto-complete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="设备状态" :label-width="formLabelWidth" prop="eqptSpec">
                                <el-select v-model="addInfos5.eqptSpec" placeholder="请选择设备状态" style="width:100%">
                                    <el-option v-for="list in eqptSpecList" :key="list.dictKey" :label="list.dictValue" :value="list.dictKey"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="addManage5 = false">取 消</el-button>
                <el-button type="primary" @click="submitAddForm5(addInfos5.type)">确 定</el-button>
            </div>
        </el-dialog>

        <!-- CPE导入对话框 -->
        <el-dialog title="导入CPE信息" size="small" :visible.sync="importTolead">
            <div v-if="importTolead">
                <dropzone id="Dropzone" :url="uploadUrl" :acceptedFileTypes="'.xls'" @vdropzone-error="showError" @vdropzone-success="showSuccess" ref="submitFiles">
                    <!-- Optional parameters if any! -->
                    <input type="hidden" name="token" value="xxx">
                </dropzone>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="importTolead = false">取 消</el-button>
                <el-button type="info" @click="submitFiles">提 交</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import Dropzone from '@/components/Drop-zone';

export default {
    components: {
        Dropzone
    },
    data() {
        return {
            infocpe: {
                tableData: [],
                re_tableData: [],
                pageData: [],

            },
            detailsData: {
                device_cpe: {
                    custName: '',
                    contactPhone: '',
                    outDate: '',
                    putDate: '',
                    useName: '',
                    cpuModel: '',
                    cpuNum: '',
                    memoryModel: '',
                    memoryCapacity: '',
                    diskModel: '',
                    diskCapacity: '',
                    subNum: '',
                },
                device_base: {
                    snNum: '',
                    modelName: '',
                    brandName: '',
                }
            },
            addEquipManage: true,
            addManage5: false,
            frameCPE: true,
            detailsCPE: false,
            importTolead: false,
            eqpt_typeList: [],
            brandNameList: [],
            specNameList: [],
            eqptSpecList: [],
            modelList: [],
            addInfos5: {
                typeName: 'cpe',
                useName: '',
                contactPhone: '',
                custName: '',
                snNum: '',
                outDate: '',
                putDate: '',
                eqpt_type: 5,
                brandName: '',
                modelName: '',
                specName: '',
                cpuModel: '',
                cpuNum: '',
                memoryModel: '',
                memoryCapacity: '',
                diskModel: '',
                diskCapacity: '',
                subNum: '',
                eqptSpec: '',
                modelId: '',
            },
            rules1: {
                useName: [
                    { required: true, message: '请输入领用人', trigger: 'blur' }
                ],
                contactPhone: [
                    { required: true, message: '请输入联系方式', trigger: 'blur' },
                    { type: 'number', message: '请输入数字' }
                ],
                custName: [
                    { required: true, message: '请输入客户信息', trigger: 'blur' }
                ],
                snNum: [
                    { required: true, message: '请输入SN编号', trigger: 'blur' }
                ],
                outDate: [
                    { required: true, message: '请选择出库日期' }
                ],
                putDate: [
                    { required: true, message: '请选择入库日期' }
                ],
                eqpt_type: [
                    { required: true, message: '请选择设备类型' }
                ],
                brandName: [
                    { required: true, message: '请选择品牌名称' }
                ],
                modelName: [
                    { required: true, message: '请选择设备型号' }
                ],
                specName: [
                    { required: true, message: '请选择设备规格' }
                ],
                cpuModel: [
                    { required: true, message: '请输入CPU型号', trigger: 'blur' }
                ],
                cpuNum: [
                    { required: true, message: '请输入CPU核数', trigger: 'blur' }
                ],
                memoryModel: [
                    { required: true, message: '请输入内存型号', trigger: 'blur' }
                ],
                memoryCapacity: [
                    { required: true, message: '请输入内存总容量', trigger: 'blur' }
                ],
                diskModel: [
                    { required: true, message: '请输入硬盘型号', trigger: 'blur' }
                ],
                diskCapacity: [
                    { required: true, message: '请输入硬盘大小', trigger: 'blur' }
                ],
                subNum: [
                    { required: true, message: '请输入网口数量', trigger: 'blur' }
                ],
                eqptSpec: [
                    { required: true, message: '请选择设备状态' }
                ]
            },
            importStatus: '',
            importTitle: {
                brand: '导入CPE信息',
            },
            uploadUrl: {
                //brand: '',
                //unitType: '',
            },
            inputWidth: {
                width: '96%'
            },
            formLabelWidth: '100px',
            //中转
            transfer: {
                typeBrand1: '',
                typeBrand2: '',
                brandName: '',
                modelName: '',
                typeName: '',
                dictKey: '',
                eqptSpec: '',
                number: '',
                table: [],
                table_big: [],
                single: [],
            },
            pageConfig: {
                curPage: 1,
                total: null,
                size: 6,
            },
            // 筛选用区域信息
            ft_cpe: {
                eqpt_type: 5,
                eqptSpec: '',
                snNum: '',
            },
        }
    },
    created() {
        // 当前页面cpe展示信息
        this.getEptRoomInfocpe();
        this.typeList();
        this.eqptState();
        this.uploadUrl = process.env.BASE_API + '/resman/device/cpe/import'
    },

    methods: {
        // 获取当前页面cpe展示信息
        getEptRoomInfocpe() {
            this.$http.get('/resman/device/cpe/state/-1')
                .then((response) => {
                    if (response.code === 0) {
                        this.infocpe.tableData = this.infocpe.re_tableData = this.transfer.table = response.data;
                        this.pageConfig.total = this.infocpe.re_tableData.length;
                        this.pageChange(this.pageConfig.curPage);
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },
        // 编辑cpe信息
        editCPE(info) {
            this.brandName();
            this.specName();
            this.eqptState();
            info.brandName = '';
            info.modelName = '';
            info.specName = '';
            info.eqptSpec = '';
            this.addInfos5 = JSON.parse(JSON.stringify(info));
            this.addInfos5.deviceId = JSON.parse(JSON.stringify(info)).deviceId;
            this.addInfos5.snNum = JSON.parse(JSON.stringify(info)).sn_num;
            this.addInfos5.eqptSpec = JSON.parse(JSON.stringify(info)).eqptState;
            this.$http.get('/resman/device/cpe/' + this.addInfos5.deviceId)
                .then((response) => {
                    if (response.code === 0) {
                        this.addInfos5.brandName = response.data.device_base.brandName;
                        this.addInfos5.modelName = response.data.device_base.modelName;
                        this.addInfos5.modelId = response.data.device_base.modelId;
                        this.addInfos5.specName = response.data.device_base.specName;

                    }
                })
            this.addManage5 = true;
        },

        //新建cpe
        createBrand(val) {
            if (val == 5) {
                this.resetForm();
                //this.typeList();
                this.brandName();
                this.specName();
                this.eqptState();
                this.addInfos5.type = 'new';
                this.addManage5 = true;
                this.getEptRoomInfocpe();
            } else {

            }

        },

        //获取设备型号回填
        // typeBrand(val) {
        //     this.transfer.typeBrand1 = val;
        //     this.changTB();
        // },
        brandType(val) {
            this.transfer.typeBrand2 = val;
            if (this.transfer.typeBrand2 === '') {
                return;
            } else {
                this.$http.get('/resman/models?eqptType=5&brandId=' + this.transfer.typeBrand2)
                    .then((response) => {
                        if (response.code === 0) {
                            this.modelList = response.data;
                            this.transfer.brandName = response.data[0].brandName;
                            this.transfer.eqptTypeName = response.data[0].eqptTypeName;
                        } else {
                            console.log(response.statusText)
                        }
                    }).catch((response) => {
                        console.log(response)
                    })
            }
        },

        //获取设备信息回填
        modelNum(val) {
            this.$http.get('/resman/model/' + val)
                .then((response) => {
                    if (response.code === 0) {
                        this.transfer.modelName = response.data.modelName;
                        this.addInfos5.cpuModel = response.data.cpuModel;
                        this.addInfos5.cpuNum = response.data.cpuCoreNum;
                        this.addInfos5.memoryModel = response.data.ramModel;
                        this.addInfos5.memoryCapacity = response.data.ramVolume;
                        this.addInfos5.diskModel = response.data.diskModel;
                        this.addInfos5.diskCapacity = response.data.diskVolume;
                        this.addInfos5.subNum = response.data.ethernetNum;
                        for (var i = 0; i < this.specNameList.length; i++) {
                            if (this.specNameList[i].dictKey == response.data.eqptSpec) {
                                this.transfer.dictKey = this.specNameList[i].dictValue;

                            }
                        }
                        this.addInfos5.specName = this.transfer.dictKey;

                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },
        changDate1(val) {
            this.addInfos5.outDate = val;
        },
        changDate2(val) {
            this.addInfos5.putDate = val;
        },

        submitAddForm5(type) {
            if (type === 'new') {
                this.export = {
                    'device_base': {
                        "brandName": this.transfer.brandName,
                        "modelId": this.transfer.modelId,
                        "typeName": 'cpe',
                        "eqptType": 5,
                        "snNum": this.addInfos5.snNum,
                        "modelName": this.transfer.modelName,
                        "eqptSpec": this.addInfos5.dictKey,
                        "specName": this.addInfos5.specName,
                        "brandId": this.addInfos5.brandId,
                        "state": this.addInfos5.eqptSpec,
                    },
                    'device_cpe': {
                        "outDate": this.addInfos5.outDate,
                        "diskModel": this.addInfos5.diskModel,
                        "cpuModel": this.addInfos5.cpuModel,
                        "custName": this.addInfos5.custName,
                        "cpuNum": this.addInfos5.cpuNum,
                        "diskCapacity": this.addInfos5.diskCapacity,
                        "memoryCapacity": this.addInfos5.memoryCapacity,
                        "useName": this.addInfos5.useName,
                        "memoryModel": this.addInfos5.memoryModel,
                        "contactPhone": this.addInfos5.contactPhone,
                        "subNum": this.addInfos5.subNum,
                        "putDate": this.addInfos5.putDate
                    }
                }
                this.$http.post('/resman/device/cpe', this.export)
                    //console.log(this.export)
                    .then((response) => {
                        if (response.code === 0) {
                            //console.log(response)
                            this.getEptRoomInfocpe();
                            this.addManage5 = false;
                        } else {
                            console.log(response.statusText)
                        }
                    }).catch((response) => {
                        console.log(response)
                    })
            } else {
                this.export = {
                    'device_base': {
                        "deviceId": this.addInfos5.deviceId,
                        "brandName": this.addInfos5.brandName,
                        "modelId": this.addInfos5.modelId,
                        "typeName": 'cpe',
                        "eqptType": 5,
                        "snNum": this.addInfos5.snNum,
                        "modelName": this.addInfos5.modelName,
                        "eqptSpec": this.addInfos5.dictKey,
                        "specName": this.addInfos5.specName,
                        "brandId": this.addInfos5.brandId,
                        "state": this.addInfos5.eqptSpec,
                    },
                    'device_cpe': {
                        "deviceId": this.addInfos5.deviceId,
                        "outDate": this.addInfos5.outDate,
                        "diskModel": this.addInfos5.diskModel,
                        "cpuModel": this.addInfos5.cpuModel,
                        "custName": this.addInfos5.custName,
                        "cpuNum": this.addInfos5.cpuNum,
                        "diskCapacity": this.addInfos5.diskCapacity,
                        "memoryCapacity": this.addInfos5.memoryCapacity,
                        "useName": this.addInfos5.useName,
                        "memoryModel": this.addInfos5.memoryModel,
                        "contactPhone": this.addInfos5.contactPhone,
                        "subNum": this.addInfos5.subNum,
                        "putDate": this.addInfos5.putDate
                    }
                }
                this.$http.put('/resman/device/cpe', this.export)
                    .then((response) => {
                        if (response.code === 0) {
                            //console.log(response)
                            this.getEptRoomInfocpe();
                            this.addManage5 = false;
                        } else {
                            console.log(response.statusText)
                        }
                    }).catch((response) => {
                        console.log(response)
                    })
            }
        },

        //设备列表
        typeList() {
            let _url = '/sys/dictionary/listById/eqpt_type';
            this.$http.get(_url)
                .then((response) => {
                    if (response.code === 0) {
                        this.eqpt_typeList = response.data;
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },

        //品牌名称
        brandName() {
            let _url = '/resman/brands?eqptType=5';
            this.$http.get(_url)
                .then((response) => {
                    if (response.code === 0) {
                        this.brandNameList = response.data;
                    }
                })
                .catch(function(response) {
                    console.log(response);
                })
        },

        //设备规格
        specName() {
            let _url = '/sys/dictionary/listById/eqpt_spec';
            this.$http.get(_url)
                .then((response) => {
                    if (response.code === 0) {
                        this.specNameList = response.data;
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },

        //设备状态
        eqptState() {
            let _url = '/sys/dictionary/listById/eqpt_state';
            this.$http.get(_url)
                .then((response) => {
                    if (response.code === 0) {
                        this.eqptSpecList = response.data;
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },


        // 删除设备相关操作
        deleteCPE(info) {
            const h = this.$createElement;
            this.$msgbox({
                title: '删除设备',
                message: h('p', null, [
                    h('span', null, '是否删除 '),
                    h('span', { style: 'color: #20A0FF;font-size:1.2em;font-weight:bold' }),
                    h('span', null, ' 这个设备？'),
                ]),
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '删除中...';
                        setTimeout(() => {
                            done();
                            setTimeout(() => {
                                instance.confirmButtonLoading = false;
                            }, 100);
                        }, 400);
                    } else {
                        done();
                    }
                }
            }).then((action) => {
                if (action === 'confirm') {
                    this.eptRoomDelete(info.deviceId);
                } else {
                    showMessage('已取消删除', 'info');
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        eptRoomDelete(deviceId) {
            let _url = '/resman/device/cpe/' + deviceId;
            this.$http.delete(_url).then((response) => {
                if (response.code === 0) {
                    this.getEptRoomInfocpe();
                    this.showMessage('删除成功!', 'success');
                } else {
                    if (response.code === -1) {
                        console.log(response.statusText);
                    } else {
                        this.showWarning(response.msg, '删除失败');
                    }
                }
            }).catch((response) => {
                console.log(response)
            })
        },
        // 分页按钮
        handleCurrentChange(val) {
            this.pageConfig.curPage = val;
            this.pageChange(val);
        },
        // 分页
        pageChange(page) {
            this.infocpe.pageData = this.infocpe.re_tableData.slice((page - 1) * this.pageConfig.size, page * this.pageConfig.size);
        },
        showMessage(msg, type) {
            this.$message({
                message: msg,
                type: type
            });
        },
        showWarning(msg, title) {
            this.$alert(msg, title, {
                showConfirmButton: false,
                showCancelButton: true,
                cancelButtonText: '关闭',
            });
        },

        //cpe详情信息
        detInfoCEP(info) {
            this.transfer.single = info
            this.frameCPE = false;
            this.detailsCPE = true;
            this.$http.get('/resman/device/cpe/' + info.deviceId)
                .then((response) => {
                    if (response.code === 0) {
                        console.log(response.data)
                        this.detailsData = response.data;
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },
        //返回cpe
        returnCPE() {
            this.frameCPE = true;
            this.detailsCPE = false;
        },

        //CPE筛选
        selectCPE() {
            if (this.ft_cpe.eqptSpec == '') {
                this.transfer.eqptSpec = -1
            } else {
                this.transfer.eqptSpec = this.ft_cpe.eqptSpec;
            }
            this.$http.get('/resman/device/cpe/state/' + this.transfer.eqptSpec)
                .then((response) => {
                    if (response.code === 0) {
                        this.infocpe.tableData = this.infocpe.re_tableData = response.data;
                        this.pageConfig.total = this.infocpe.re_tableData.length;
                        this.pageChange(this.pageConfig.curPage);
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },
        //CPE搜索
        filterCPE() {
            for (var i = 0; i < this.transfer.table.length; i++) {
                if (this.transfer.table[i].sn_num == this.ft_cpe.snNum) {
                    this.transfer.table_big.push(this.transfer.table[i]);
                }
                this.infocpe.tableData = this.infocpe.re_tableData = this.transfer.table_big;
                this.pageConfig.total = this.infocpe.re_tableData.length;
                this.pageChange(this.pageConfig.curPage);
            }
        },
        //导入
        toLead() {
            window.location.href = this.uploadUrl;
        },
        showSuccess(file, response, e) {
            this.showMessage('文件 ' + file.name + ' 上传成功!', 'success');
            if (this.importStatus === 'brand') {
                this.inPageTemp.eqptUnitType = '';
                this.createBrand();
            } else {
                this.inPageTemp.eqptType = '';
                this.inPageTemp.brandId = '';
                this.filterCPE();
            }
        },
        showError(file, error, xhr) {
            const h = this.$createElement;
            this.$msgbox({
                title: '警告',
                message: h('p', null, [
                    h('p', null, '文件 : ' + file.name + ' 上传失败 !'),
                    h('p', { style: 'color: red;margin-top:0.2em' }, '错误 : ' + error),
                ]),
                type: 'warning',
                confirmButtonText: '确定',
            })
        },
        submitFiles() {
            this.$refs.submitFiles.enqueueFiles();
        }
        ,
        //导出
        derive() {
            if (this.ft_cpe.eqptSpec == '' && this.ft_cpe.snNum == '') {
                window.location.href = process.env.BASE_API + '/resman/device/cpe/export';
            }
        },
        //跳转报修
        repair(info) {

        },
        skip(val) {
        },
        // 初始化
        resetForm() {
            this.addInfos5 = {
                deviceId: '',
                useName: '',
                contactPhone: '',
                custName: '',
                snNum: '',
                outDate: '',
                putDate: '',
                eqpt_type: '',
                brandName: '',
                modelName: '',
                specName: '',
                cpuModel: '',
                cpuNum: '',
                memoryModel: '',
                memoryCapacity: '',
                diskModel: '',
                diskCapacity: '',
                subNum: '',
                eqptSpec: '',
                modelId: '',
            },
                this.infocpe = {

                };
        },
    }
}
</script>

<style>
.cpe_list{

}
.cpe_fram {
    width: 70%;
    height: 36px;
    line-height: 36px;
    border: 1px solid #bfcbd9;
    display: inline-block;
    text-indent: 10px;
}

.detailCPE {
    padding: 10px 20px;
    font-size: 14px;
}

.detailCPE .el-row {
    height: 36px;
    line-height: 36px;
}
.addCPE .el-dialog{
    width:65%;
}
.addCPE .el-input {
    width: 70%;
}

.cpe_list .el-row{
    margin-bottom:20px;
}
.cpe_list .addCPE .el-row{
    margin-bottom:0px;
}
</style>
